<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据节点信息查询</title>
    <script>
        function f1(){
            // 返回一个节点
            let p1 = document.getElementById("p1");
            console.log(p1)
        }
        function f2(){
            // 返回多个节点
            let p = document.getElementsByName("p");
            console.log(p);
        }
        function f3(){
            let p = document.getElementsByTagName("p");
            console.log(p)
        }
        function f4(){
            // 方式一:返回匹配的第一个节点
            // let p1 = document.querySelector("p");
            let p1 = document.querySelector("#p1")
            console.log(p1);
            // 方式二:返回匹配的所有节点
            // let ps = document.querySelectorAll("p");
            // let ps = document.querySelectorAll("p[name='p']");
            let ps = document.querySelectorAll(".c1");
            console.log(ps);
        }
    </script>
</head>
<body>
<button onclick="f1()">根据id属性查找</button><br>
<button onclick="f2()">根据name属性查找</button><br>
<button onclick="f3()">根据标签名查找</button><br>
<button onclick="f4()">根据选择器查找</button><br>
<p id="p1" name="p">第1个段落</p>
<p name="p" class="c1">第2个段落</p>
<p class="c1">第3个段落</p>
<p name="p">第4个段落</p>
<p class="c1">第5个段落</p>
</body>
</html>